<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*p{
				background-color: #00f;
			}
			.p2{
				background-color: #808080;
			}
			#a1{
				background-color: #e61061;
			}
			#a2{
				background-color: #67b374;
			}*/
			/*后代选择器 空格*/
			/*#one p{
				background-color: red;
			}*/
			/*子选择器*/
			/*#one>p{
				background-color: blue;
			}
			*/
			div>a{
				background-color: #e61061;
			}
			div>span>a{
				background-color: #67b374;
			}
			p{
				background-color: #00f;
			}
			/*相邻选中器 + 兄弟关系中的后续的一个元素*/
			p+p{
				background-color: #808080;
			}
			/*兄弟选择器 兄弟关系中的后续的所有元素*/
			.p1~p{
				background-color: blueviolet;
				
			}
		</style>
	</head>
	<body>
		<div id="">
			<p class="p1">hello css!!</p>
			<p>hello css!!</p>
		</div>
		<div id="">
			<a id="a1">背景色是#e61061</a>
			<span>
				<a href="#" id="a2">背景色是#67b374</a>
			</span>
		</div>
		<p>背景色是#00f</p>
		<p>背景色是#808080</p>
		<p>背景色是#808080</p>
		<div id="bor">
			<p class="p1">测试兄弟选择器01</p>
			<p >测试兄弟选择器02</p>
			<p>测试兄弟选择器03</p>
		</div>
	</body>
</html>
